<template>
  <style include="cr-shared-style cros-color-overrides">
    :host {
      --grey-border: 1px solid var(--google-grey-300);
      --dialog-top-border-size: 35px;
    }

    .container,
    .signin-frame {
      height: 100%;
      margin: 0;
      padding: 0;
      width: 100%;
    }

    .container {
      align-items: center;
      display: flex;
      height: calc(100% - 90px);
      justify-content: center;
      margin-top: calc(-1 * var(--dialog-top-border-size));
    }

    /* Main container for all page elements */
    .template-container {
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: flex-start;
      width: 100%;
     }

    .column-layout {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .content-container {
      display: flex;
      height: 100%;
      width: 100%;
    }

    /* Used to spread out the buttons in the old-style OOBE layout
     * which has 2 buttons at the bottom  of the page.
     */
    .buttons-layout {
      justify-content: space-between;
    }

    .new-oobe-layout-back-button {
      padding: 22px 0 0 22px;
    }

    @media (orientation: landscape) {
      .template-container {
        max-height: 680px;
        max-width: 1040px;
      }

      /* In landscape  mode, the main title and content area 
       * are arranged horizontally.
       */
      .content-container {
        flex-direction: row;
      }

      /* Layout for the new OOBE buttons is adaptive */
      .new-oobe-buttons-layout {
        align-items: center;
        display: flex;
        justify-content: flex-end;
        padding-inline-end: 32px;
        width: 100%;
      }

      /* Only applicable for locally built pages (i.e. network offline) */
      .title-area {
        height: 100%;
        justify-content: flex-start;
        padding-inline-start: 55px;
      }

      .content-area {
        align-items: stretch;
        display: flex;
        justify-content: flex-start;
        width: 58%;
      }
    }

    @media (orientation: portrait) {
      .template-container {
        max-height: 1040px;
        max-width: 680px;
      }

      /* In portrait  mode, the main title and content area
       * is arranged vertically 
       */
      .content-container {
        flex-direction: column;
      }

      /* Layout for the new OOBE buttons is adaptive */
      .new-oobe-buttons-layout {
        display: flex;
        justify-content: center;
        width: 100%;
      }

      /* Only applicable for locally built pages (i.e. network offline) */
      .title-area {
         align-items: center;
         height: 40%;
         justify-content: flex-end;
         width: 100%;
       }

      .content-area {
        align-items: center;
        display: flex;
        justify-content: space-evenly;
      }
    }

    .main[scrollable].can-scroll:not(.is-scrolled):not(.scrolled-to-bottom) {
      background: var(--background-gradient-0);
    }

    .main[scrollable].can-scroll.is-scrolled:not(.scrolled-to-bottom) {
      background: var(--background-gradient-0), var(--background-gradient-180);
    }

    .main[scrollable].is-scrolled.scrolled-to-bottom {
      background: var(--background-gradient-180);
    }

    .main {
      height: 100%;
      width: 100%;
    }

    .footer {
      align-items: center;
      display: flex;
      height: 115px;
      width: 100%;
    }

    .signin-frame {
      background-color: white;
      overflow: hidden;
    }

    paper-spinner-lite {
      --spinner-size: 25px;
      display: none;
      height: var(--spinner-size);
      width: var(--spinner-size);
    }

    paper-spinner-lite[active] {
      display: inline-block;
    }

    edu-coexistence-template {
      align-items: center;
      display: flex;
      height: 100%;
      justify-content:  center;
    }

    h1 {
      font-size: 2em;
      font-weight: normal;
      margin-bottom: 16px;
      margin-top: 20px;
    }

    p {
      line-height: 1.5;
      margin: 0;
      white-space: pre-line;
    }

    a {
      color: var(--google-blue-700);
      text-decoration: none;
    }

    .main-padding {
      height: calc(100% - calc(64px -var(--dialog-top-border-size)));
      padding-inline-end: 64px;
      padding-inline-start: 64px;
      padding-top: calc(64px - var(--dialog-top-border-size));
      width: 100%;
    }

    .text-elide {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .secondary {
      color: var(--google-grey-700);
      font-weight: 400;
    }

    .google-logo {
      height: 32px;
      margin-top: 10px;
      width: 32px;
    }

    .google-full-logo {
      width: 74px;
    }

    .profile-icon {
      background: center / cover no-repeat;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .buttons-layout {
      align-items: center;
      display: flex;
      justify-content: space-between;
      margin-inline-end: 32px;
      margin-inline-start: 32px;
      width: 100%;
    }

    span[slot='buttons'] {
      display: flex;
      width: 100%;
    }

    span[slot='main'] {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    edu-coexistence-button[button-type='back'] {
      margin-inline-start: auto;
    }

  </style>
</template>
